<template>
  <div class="advanced-mindmap-container">
    <div class="toolbar">
      <div class="toolbar-group">
        <button @click="addChildNode" :disabled="!hasActiveNode">添加子节点</button>
        <button @click="addSiblingNode" :disabled="!hasActiveNode">添加同级节点</button>
        <button @click="deleteNode" :disabled="!hasActiveNode">删除节点</button>
      </div>
      
      <div class="toolbar-group">
        <button @click="exportPNG">导出PNG</button>
        <button @click="exportJSON">导出JSON</button>
        <button @click="fitView">适应画布</button>
      </div>
      
      <div class="toolbar-group">
        <select v-model="selectedTheme" @change="changeTheme">
          <option value="default">默认主题</option>
          <option value="dark">深色主题</option>
        </select>
        
        <select v-model="selectedLayout" @change="changeLayout">
          <option value="logicalStructure">逻辑结构图</option>
          <option value="mindMap">思维导图</option>
        </select>
      </div>
    </div>
    
    <div class="mindmap-wrapper">
      <div id="advancedMindMapContainer" ref="mindMapContainer"></div>
    </div>
  </div>
</template>

<script>
import MindMap from "simple-mind-map";
// 导入插件
import Export from 'simple-mind-map/src/plugins/Export.js';
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js';
import Drag from 'simple-mind-map/src/plugins/Drag.js';

// 注册插件
MindMap.usePlugin(Export);
MindMap.usePlugin(KeyboardNavigation);
MindMap.usePlugin(Drag);

export default {
  name: 'AdvancedMindMap',
  data() {
    return {
      mindMap: null,
      hasActiveNode: false,
      selectedTheme: 'default',
      selectedLayout: 'logicalStructure',
      
      // 初始数据
      initialData: {
        "data": {
          "text": "高级思维导图示例",
          "expand": true,
          "isActive": true
        },
        "children": [
          {
            "data": {
              "text": "功能特性",
              "expand": true
            },
            "children": [
              {
                "data": {
                  "text": "拖拽支持",
                  "expand": true
                },
                "children": []
              },
              {
                "data": {
                  "text": "多种导出格式",
                  "expand": true
                },
                "children": []
              }
            ]
          },
          {
            "data": {
              "text": "主题样式",
              "expand": true
            },
            "children": [
              {
                "data": {
                  "text": "内置主题",
                  "expand": true
                },
                "children": []
              }
            ]
          }
        ]
      }
    }
  },
  
  mounted() {
    this.initMindMap();
  },
  
  beforeDestroy() {
    if (this.mindMap) {
      this.mindMap.destroy();
    }
  },
  
  methods: {
    initMindMap() {
      this.mindMap = new MindMap({
        el: this.$refs.mindMapContainer,
        data: this.initialData,
        layout: this.selectedLayout,
        theme: this.selectedTheme
      });
      
      // 监听事件
      this.bindEvents();
    },
    
    bindEvents() {
      // 监听节点激活状态变化
      this.mindMap.on('node_active', (node, activeNodeList) => {
        this.hasActiveNode = activeNodeList.length > 0;
      });
      
      // 监听节点点击
      this.mindMap.on('node_click', (node, e) => {
        console.log('节点点击:', node);
      });
    },
    
    // 添加子节点
    addChildNode() {
      this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
        text: '新子节点'
      });
    },
    
    // 添加同级节点
    addSiblingNode() {
      this.mindMap.execCommand('INSERT_NODE', false, [], {
        text: '新同级节点'
      });
    },
    
    // 删除节点
    deleteNode() {
      this.mindMap.execCommand('REMOVE_NODE');
    },
    
    // 导出PNG
    exportPNG() {
      this.mindMap.export('png', true, '思维导图').then(url => {
        const a = document.createElement('a');
        a.href = url;
        a.download = '思维导图.png';
        a.click();
      });
    },
    
    // 导出JSON
    exportJSON() {
      const data = this.mindMap.getData();
      const jsonStr = JSON.stringify(data, null, 2);
      const blob = new Blob([jsonStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = '思维导图.json';
      a.click();
    },
    
    // 适应画布
    fitView() {
      this.mindMap.view.fit();
    },
    
    // 切换主题
    changeTheme() {
      this.mindMap.setTheme(this.selectedTheme);
    },
    
    // 切换布局
    changeLayout() {
      this.mindMap.setLayout(this.selectedLayout);
    }
  }
}
</script>

<style scoped>
.advanced-mindmap-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.toolbar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  gap: 20px;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.toolbar button:hover:not(:disabled) {
  background-color: #0056b3;
}

.toolbar button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.toolbar select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.mindmap-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#advancedMindMapContainer {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}

#advancedMindMapContainer * {
  margin: 0;
  padding: 0;
}
</style>
